<template>
    <div ref="barChart" style="width: 100%; height: 300px;"></div>
  </template>

  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import * as echarts from 'echarts'

  const barChart = ref(null)
  let chart = null

  const initChart = () => {
    const chartDom = barChart.value
    chart = echarts.init(chartDom)

    const option = {
      title: {
        text: '本月咨询师预约情况',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['李四', '王五', '张三', '赵二', '张武'],
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '预约数量',
          type: 'bar',
          barWidth: '40%',
          data: [100, 140, 220, 100, 130],
          itemStyle: {
            color: '#409EFF' // 使用 Element Plus 的主题蓝色
          }
        }
      ]
    }

    chart.setOption(option)
  }

  // 监听窗口大小变化
  const handleResize = () => {
    chart && chart.resize()
  }

  onMounted(() => {
    initChart()
    window.addEventListener('resize', handleResize)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    chart && chart.dispose()
  })
  </script>

  <style scoped>
  /* 可以添加自定义样式 */
  </style>
